<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chess</title>
<style>
	body{
	    margin:0px;
	    padding:0px;
		background:url("image/bg.jpg");
	}
	#main{
		position:absolute;
		top:300px;
		left:250px;
	}
	.txt{
		width:260px;
		height:30px;
		font-size:24px;
		border:2px solid #3399FF;
		ime-mode:disabled;
	}
	.btn{
		width:80px;
		height:36px;
		border:2px #3399FF solid;
		border-left:none;
		background:#62B0FF;
		font-weight:bold;
		color:white;
	}
</style>
<script>
	document.onkeyup = function(){
		if(event.keyCode==13){
			enterHall();
		}
	}
	function checkLen(ele){
		var len = ele.value.length;
		if(len>8)ele.value =  ele.value.substring(0,8);
	}
	function enterHall(){
		var ele = document.getElementsByName('username')[0];
		var len = ele.value.length;
		if(len==0){alert('enter a name');return;}
		window.frm.submit();
	}
</script>
</head>
<body>
<div id="main">
	<div style="color:#eeeeee"><h3>Specify a name for your role.</h3></div>
	<div><form name="frm" action="EnterHall" method="post"><input type="text" name="username" class="txt" onpropertychange="checkLen(this);"><input class="btn" type="button" value="ENTER" onclick="enterHall()"></form></div>
	<div style="color:#D60328">[!!!no more than 8 chars.!!!]</div>
</div>
</body>
</html>